<template>
  <div class="date-bg">
    <div class="title">
      <div class="title-text">2025年01月</div>
      <div class="date-serve">
        <ol>
          <li>日</li>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
        </ol>
      </div>
      <div class="day">
        <div 
        class="day-item" v-for="(item,index) in 35" 
        :class="{'dateActive':item ===6  }" 
        :key="index">{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
  .date-bg{
    background-color: white;
    padding: 0 15px;
    border-radius:8px ;
    .title{
      .title-text{
        color: #2b2e2d;
        line-height: 60px;
        font-size: 14px;
        font-weight: 600;
      }
      .date-serve{
        border-top:1px solid #cccccc ;
        border-bottom:1px solid #cccccc ;
        ol{
          display: flex ;
          justify-content: space-between;
          list-style: none;
          padding: 8px;
          line-height: 32px;
          margin: 0;
        }
      }
      .day{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 355px;
        .day-item{
          width: 14%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          // border: 1px solid #cccccc;
          margin-top: 5px;
        }
        & > div:nth-child(7n+1),div:nth-child(7n){
          color: #dbdbdb;
        }
      }
    }
  }
  .dateActive{
    background-color: #0a78f8;
    border-radius: 50%;
    color: white
  }
</style>